﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery轻量级进度条 progressbar 带动画显示的进度过程的jquery进度条特效</title>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
/**{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#333;text-decoration:none;}
 votebox 
.votebox{margin:20px auto;width:600px;border:solid 1px #ddd;padding:30px 0;}
.votebox h2{font-size:14px;color:#05345E;margin:0;text-align:center;}
.votebox ul{height:18px;margin:20px 0 0 200px;}
.votebox li{height:18px;line-height:18px;overflow:hidden;float:left;margin:0 20px 0 0;font-size:12px;}
.votebox li span{display:inline-block;float:left;width:10px;height:10px;overflow:hidden;background:url(pbar/barbg.gif) repeat-x;margin:3px 3px 0 0;}
.votebox li span.barline-01{border:1px solid #C2142C;background-position:0 0;}
.votebox li span.barline-02{border:1px solid #EFA804;background-position:0 -10px;}
.votebox li span.barline-03{border:1px solid #0A83E6;background-position:0 -20px;}
.votebtn{height:32px;overflow:hidden;margin:30px auto 0 auto;width:205px;}
.votebtn a{background:url(pbar/yellowbtn.gif) no-repeat;width:82px;height:32px;line-height:32px;overflow:hidden;text-align:center;font-size:14px;font-weight:800;display:inline-block;color:#fff;margin:0 10px;}
.votebtn a:hover{color:#fff;text-decoration:none;}*/
/* barbox */
.barbox{height:18px;line-height:18px;overflow:hidden;padding:20px 0 0 120px;font-size: 12px;vertical-align: middle;}
.barbox div{float:left;font-size:14px;width:112px;text-align:right;}
.barbox div a{color:#0048CC;}
.barbox div{float:left;}
.barbox div.last{color:#999;}
.barbox div.barline{width:160px;background:#E3E3E3;height:12px;overflow:hidden;margin:3px 10px 0 10px;display:inline;border-bottom:solid 1px #F4F4F4;border-right:solid 1px #F4F4F4;}
.barbox div.barline div.progressbar{height:10px;overflow:hidden;background:url(pbar/barbg.gif) repeat-x;}
.barbox div.barline div.progressbar.barred{background-position:0 0;border:1px solid #C2142C;}
.barbox div.barline div.progressbar.baryellow{background-position:0 -10px;border:1px solid #EFA804;}
.barbox div.barline div.progressbar.barblue{background-position:0 -20px;border:1px solid #0A83E6;}
</style>

<div class="barbox">
<div class="barline">
<div divindex="3" id="chartSlide_3"  w="50" style="width:0px;" class="progressbar"></div>
</div>10%
</div><!--votebox end-->
<script language="javascript">
    function animate() {
        $(".progressbar").each(function(i, item) {
            $(item).addClass('barblue');
            var a = $(item).attr("w");
            $(item).animate({
                width: $(item).attr("w") + "%"
            }, 1000);
        });
    }
    animate();
</script>
</body>
</html> 